<template>
  <a-modal
    v-model:visible="visibleModel"
    draggable
    width="780px"
    @ok="onSubmit"
    @cancel="visibleModel = false"
  >
    <template #title> {{ title }}</template>
    <a-row>
      <a-col :flex="1">
        <a-form
          :model="formModel"
          :label-col-props="{ span: 6 }"
          :wrapper-col-props="{ span: 18 }"
          label-align="left"
        >
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="keywords" label="关键词">
                <a-input
                  v-model="formModel.keywords"
                  allow-clear
                  placeholder="请输入关键词"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-space :size="18">
                <a-button type="primary" @click="search">
                  <template #icon>
                    <icon-search />
                  </template>
                  {{ $t('searchTable.form.search') }}
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
    </a-row>
    <a-table
      v-model:selectedKeys="selectedKeys"
      row-key="id"
      height="500px"
      :loading="loading"
      :data="renderData"
      :row-selection="rowSelection"
      :bordered="false"
      :pagination="{
        current: pagination.page,
        total: pagination.total,
        pageSize: pagination.rows,
        showTotal: true,
        showPageSize: true,
      }"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
    >
      <template #columns>
        <a-table-column title="名称" data-index="name" :width="160" />
        <a-table-column title="身份证号码" data-index="cardId" :width="200" />
        <a-table-column title="手机号码" data-index="phone" :width="160" />
        <a-table-column title="邮箱" data-index="email" :width="160" />
      </template>
    </a-table>
  </a-modal>
</template>

<script lang="ts" setup>
  import { TableRowSelection } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import { ref, reactive, PropType, computed, watch } from 'vue';
  import { PolicyParams, PersonVo, queryPolicyList } from '@/api/person';

  const props = defineProps({
    title: {
      type: String,
      default: '人员选择',
    },
    visible: {
      type: Boolean,
      default: false,
    },
    selectedList: {
      type: Array as PropType<string[]>,
      default: () => {
        return [];
      },
    },
    multiple: {
      type: Boolean,
      default: true,
    },
  });
  const emit = defineEmits(['change', 'update:visible', 'update:selectedList']);
  const generateFormModel = () => {
    return {
      name: '',
      phone: '',
      keywords: '',
    };
  };
  const selectedKeys = ref<string[]>(props.selectedList);
  const pagination = reactive({
    page: 1,
    rows: 20,
    total: 0,
  });
  const rowSelection = reactive<TableRowSelection>({
    type: props.multiple ? 'checkbox' : 'radio',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  const { loading, setLoading } = useLoading();
  const renderData = ref<PersonVo[]>([]);
  const formModel = ref(generateFormModel());
  const visibleModel = computed({
    get() {
      return props.visible;
    },
    set(value) {
      emit('update:visible', value);
      selectedKeys.value = value ? selectedKeys.value : [];
    },
  });

  const fetchData = async (
    params: PolicyParams // = { current: 1, pageSize: 20 }
  ) => {
    setLoading(true);
    try {
      const { data } = await queryPolicyList(params);
      renderData.value = data.rows;
      pagination.total = data.total;
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  const onPageChange = (current: number) => {
    pagination.page = current;
    fetchData({ ...formModel.value, ...pagination });
  };

  const onPageSizeChange = (pageSize: number) => {
    pagination.rows = pageSize;
    fetchData({ ...formModel.value, ...pagination });
  };
  function onSubmit() {
    const arr = renderData.value.filter((item) =>
      selectedKeys.value.includes(item.id)
    );
    emit('change', arr);
    emit('update:visible', false);
    emit('update:selectedList', selectedKeys.value);
    selectedKeys.value = [];
  }
  watch(
    () => props.selectedList,
    (n, o) => {
      if (n !== o) {
        selectedKeys.value = props.selectedList;
      }
    }
  );
  fetchData({ ...formModel.value, ...pagination });
  const search = () => {
    pagination.page = 1;
    fetchData({ ...formModel.value, ...pagination });
  };
</script>

<style scoped>
  .ellipsis-text {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 这里设置为3行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
